<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">平衡测试</block>
    </cu-custom>
    <view class="contents u-f-ajc u-f-column">
      <view>闭眼单脚站立</view>
      <view style="font-size: 90rpx;margin: 100rpx 0;">{{minute}}:{{second}}</view>
      <view class="u-f-ac u-f-jsa" style="padding: 20rpx;">
        <view class="items u-f-ajc u-f-column" v-for="(item, index) in list" :key="index" :class="item.isActive ? 'actives' : ''"
          @click.stop="toggle(item, index)">
          <view style="margin-bottom: 50rpx;">{{item.title}}</view>
          <view class="inputs">
            <input type="text" v-model="item.input" placeholder="秒" class="t-a-c" />
          </view>
        </view>
      </view>

      <view class="start u-f-ajc">
        <view class="u-f-ajc" @click="start">{{isStart ? '完成' : '启动'}}</view>
      </view>
    </view>

    <view @click="confirm" v-if="isButton" style="position: fixed;bottom: 50rpx;left: 10%; z-index: 99; width: 80%;height: 80upx;line-height: 80upx;text-align: center;background-color: #39BB9E;color: #fff;font-size: 32upx;border-radius: 10rpx;">
      保存
    </view>

  </view>
</template>

<script>
  let timer;

  export default {
    data() {
      return {
        input1: '',
        list: [{
            title: '左脚测试值',
            input: '',
            isActive: true,
          },
          {
            title: '右脚测试值',
            input: '',
            isActive: false,
          },
        ],
        second: '00',
        minute: '00',
        isStart: false,
        isButton: false,
      }
    },
    methods: {
      toggle(item, index) {
        if (!item.isActive) {
          this.second = '00'
          this.minute = '00'
        }
        this.list.forEach(item => item.isActive = false)
        this.list[index].isActive = true
      },
      start() {
        this.isStart = !this.isStart
        if (this.isStart) {
          timer = setInterval(() => {
            this.second = parseInt(this.second) + 1
            if (this.second < 10) this.second = '0' + this.second
            if (this.second > 59) {
              this.second = '00'
              this.minute = parseInt(this.minute) + 1
              if (this.minute < 10) this.minute = '0' + this.minute
            }
          }, 1000)
        } else {
          clearInterval(timer)
          let index = this.list.findIndex(item => item.isActive)
          let inputs = parseInt(this.minute) * 60 + parseInt(this.second)
          this.list[index].input = inputs;
          if (this.list.find(item => item.input)) this.isButton = true
        }
      },
      goPage() {
        let url = `../add_assessment`;
        uni.redirectTo({
          url
        })
      },
      confirm() {
        if (this.list.find(item => item.input)) {
          let objs = uni.getStorageSync('fmsDetails2')
          objs.list1 = this.list
          uni.setStorageSync('fmsDetails2', objs)
          this.goPage();
        } else {
          return uni.showToast({
            title: '请测试获取数据~',
            icon: 'loading'
          });
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .contents {
    padding: 30rpx;
    color: #FFFFFF;
  }

  .items {
    width: 44%;
    height: 300rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    font-size: 30rpx;

    .inputs {
      width: 100%;
      border-bottom: 1px solid #636875;
      padding-bottom: 10rpx;
      color: $uni-color-zhuti;
    }
  }

  .actives {
    background-color: #3F4551;
  }

  .start {
    width: 120rpx;
    height: 120rpx;
    margin-top: 40rpx;
    border-radius: 100%;
    border: 2px solid $uni-color-zhuti;
    padding: 6rpx;

    view {
      background-color: $uni-color-zhuti;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
</style>
